<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" href="/img/apple-icon.png">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>
        AntRpc Console
    </title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <!--     Fonts and icons     -->
    <link href="/css/google-fonts.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/fontawesome-v5.7.1-all.css">
    <!-- CSS Files -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/css/now-ui-dashboard.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
    <link href="/css/my.css" rel="stylesheet"/>
    <!-- CSS Just for demo purpose, don't include it in your project -->

</head>
<body>
<div class="wrapper ">
    <div th:replace="~{common :: #common-sidebar}"></div>
    <div class="main-panel" id="main-panel">
        <nav id="common-nav" class="navbar navbar-expand-lg navbar-transparent  bg-primary  navbar-absolute">
            <div class="container-fluid my-padding-left-top-0">
                <div th:replace="~{common :: #commons-nav-btns}"></div>
                <div class="collapse navbar-collapse justify-content-end w-100" id="navigation">
                    <form style="width: 100%;" action="/">
                        <div class="input-group no-border">
                            <input type="text" name="name" class="form-control" placeholder="Search..."/>
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <i class="now-ui-icons ui-1_zoom-bold"></i>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </nav>
        <div class="panel-header panel-header-sm"></div>
        <div class="content">
            <div class="row">
                <div class="col-md-12">
                    <ol class="breadcrumb my-breadcrumb">
                        <li class="breadcrumb-item"><a href="/">服务列表</a></li>
                        <li class="breadcrumb-item">
                            <a id="clazz_a" th:href="@{'/details?clazz=' + ${args.className}}"
                               th:text="${args.className}"></a>
                        </li>
                        <li id="host_li" class="breadcrumb-item active" th:text="${args.host}"></li>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">方法调用情况统计</h5>
                        </div>
                        <div class="card-body">
                            <div class="content">
                                <div class="row">
                                    <div class="col-md-1 pr-0">
                                        <label for="datetime_range"
                                               class="text-right w-100 my-margin-tb-10px col-form-label">时间范围</label>
                                    </div>
                                    <div class="col-md-5">
                                        <input type="text" id="datetime_range"
                                               class="form-control datetimepicker my-margin-tb-10px"
                                               placeholder="选择开始时间与结束时间"
                                               th:value="${args.timeRangeDTO.range}"/>
                                    </div>
                                    <div class="col-md-1">
                                        <button type="submit" rel="tooltip" title="查询" onclick="query_stat();"
                                                class="btn btn-info btn-icon btn-sm my-margin-tb-10px">
                                            <i class="now-ui-icons ui-1_zoom-bold"></i>
                                        </button>
                                    </div>
                                    <div class="col-md-3"></div>
                                    <div class="col-md-2">
                                        <select id="refresh_select" class="w-100 form-control my-margin-tb-10px">
                                            <option th:selected="${args.refresh == 'none'}" value="none">关闭自动刷新</option>
                                            <option th:selected="${args.refresh == '5'}" value="5">5秒自动刷新</option>
                                            <option th:selected="${args.refresh == '10'}" value="10">10秒自动刷新</option>
                                            <option th:selected="${args.refresh == '30'}" value="30">30秒自动刷新</option>
                                            <option th:selected="${args.refresh == '60'}" value="60">60秒自动刷新</option>
                                            <option th:selected="${args.refresh == '300'}" value="300">300秒自动刷新
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead class="text-primary">
                                            <tr>
                                                <th>#</th>
                                                <th>方法名</th>
                                                <th>次数</th>
                                                <th>qps1</th>
                                                <th>qps5</th>
                                                <th>qps15</th>
                                                <th>Min Rt</th>
                                                <th>Avg Rt</th>
                                                <th>Max Rt</th>
                                                <th>Rt 99%</th>
                                                <th>Rt 95%</th>
                                                <th>Rt 75%</th>
                                                <th>Rt 50%</th>
                                                <th>Rt 25%</th>
                                                <th>Rt 5%</th>
                                                <th>Rt 1%</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr th:each="it, itStat: ${details}">
                                                <td th:text="${itStat.index + 1}"></td>
                                                <td th:text="${it.methodName}"></td>
                                                <td th:text="${it.count}"></td>
                                                <td th:text="${it.qps1}"></td>
                                                <td th:text="${it.qps5}"></td>
                                                <td th:text="${it.qps15}"></td>
                                                <td th:text="${it.rtMin}"></td>
                                                <td th:text="${it.rtMean}"></td>
                                                <td th:text="${it.rtMax}"></td>
                                                <td th:text="${it.rt1}"></td>
                                                <td th:text="${it.rt5}"></td>
                                                <td th:text="${it.rt25}"></td>
                                                <td th:text="${it.rt50}"></td>
                                                <td th:text="${it.rt75}"></td>
                                                <td th:text="${it.rt95}"></td>
                                                <td th:text="${it.rt99}"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:insert="js"></div>
<script>


    function query_stat() {
        var ranges = $("#datetime_range").val();
        var clazz = $("#clazz_a").text();
        var host = $("#host_li").text();
        var refresh = $("#refresh_select").val();
        window.location.href = "/method_stat?clazz=" + clazz + "&host=" + host + "&ranges=" + ranges + "&r=" + refresh;
    }

    function window_auto_refresh(seconds) {
        if (seconds > 0 && !isNaN(seconds)) {
            window_auto_refresh.handler = window.setTimeout(function () {
                var tmps = $("#datetime_range").val().split("~");
                if (tmps.length === 2) {
                    $("#datetime_range").val(tmps[0] + "~" + moment().add(1, "minutes").format("YYYY-MM-DD HH:mm"));
                }
                query_stat();
            }, seconds * 1000);
        }
    }

    $(document).ready(function () {
        $("#service_list_li").addClass("active");

        $("#datetime_range").daterangepicker({
            opens: "left",
            timePicker: true,
            timePicker24Hour: true,
            minDate: moment().add(-7, "day"),
            maxDate: moment(),
            locale: {
                format: "YYYY-MM-DD HH:mm",
                separator: "~",
                applyLabel: "确定",
                cancelLabel: "取消",
                fromLabel: "开始",
                toLabel: "结束",
                daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
                monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
            }
        }, function (start, end, label) {

        }).on("apply.daterangepicker", function () {

        });

        var seconds = parseInt($("#refresh_select").val());
        window_auto_refresh(seconds);
        $("#refresh_select").change(function () {
            if (window_auto_refresh.handler !== undefined) {
                window.clearTimeout(window_auto_refresh.handler);
                window_auto_refresh.handler = undefined;
            }
            var seconds = parseInt($(this).val());
            window_auto_refresh(seconds);
        });

    });


</script>
</body>
</html>